<script lang="ts" setup>
import navBarScroll from '@/components/navBar/navBarScroll.vue'
import { detailMeiYeProject } from '@/api/meiye.js'
import { paramDecode, getImage, paramEncode } from '@/util/bussinessTool'
import { computed, onMounted, reactive, ref } from 'vue';
import { commonStore } from '@/stores/commonStore/commonStore'
import { useRouter } from 'vue-router';
interface dataType {
    images: string,
    name: string,
    svcMinute: number,
    svcTimes: number,
    price: number,
    notice: string,
    detail: string,
    id: string,
}
const store = commonStore()
const payload = paramDecode()
let imgList = ref()
let detail = reactive({
    data: {
        name: '',
        svcMinute: 0,
        svcTimes: 0,
        price: 0,
        images: '',
        notice: '',
        detail: '',
        id:''
    }
})
onMounted(() => {
    detailMeiYeProject({ id: payload.id }).then((res: { data: dataType }) => {
        detail.data = res.data
        imgList.value = res.data.images.split(',')
    })
})
const payColor = computed(() => {
    return {
        color: store.themePaycolor
    }
})
const router = useRouter()
function onData(){
    let query = paramEncode({ projectId: detail.data.id })
    router.push({ name: 'selectWorker' ,query: query })
}
</script>
<template>
    <navBarScroll />
    <div class="bg-white i-pb-10"  id="detail">
        <van-swipe :autoplay="3000" width="375px" :show-indicators="false" height="240px">
            <van-swipe-item v-for="item in imgList" class="w-full h-full">
                <van-image width="100%" height="100%" fit="contain" :src="getImage(item)" />
            </van-swipe-item>
        </van-swipe>
        <div class=" i-py-20 i-px-15 flex justify-between items-end leading-none">
            <div>
                <div class="i-text-20 font-bold i-mb-10 text-gray-300">{{ detail.data.name }}</div>
                <div class="text-gray-300 i-text-15 flex items-baseline">
                    <div :style="payColor" class="font-bold">
                        <span class="i-text-20">￥</span>
                        <span class="i-text-28 i-m-r-10">{{ detail.data.price }}</span>
                    </div>
                    <div class="flex items-end">
                        <span class="i-ml-3">{{ detail.data.svcMinute }}分钟</span>
                    </div>
                </div>
            </div>
            <div class="i-text-15">{{ detail.data.svcTimes }}人选择</div>
        </div>
        <div v-html="detail.data.detail" class="w-full h-auto" ></div>
        <div v-html="detail.data.notice" class="i-mx-15 bg-gray-200	i-round-2 leading-none i-p-5" id="notice"></div>
    </div>
    <div class="button-height">
        <div class=" i-px-15 i-py-10  bg-white divide-gray-200 z-10 fixed bottom-0 left-0 right-0 border-t">
            <van-button :color="store.themeColorValue" size="large" block round @click="onData">预约</van-button>
        </div>
    </div>
</template>
<style scoped>
.button-height {
    height: 60px;
}

.van-button {
    height: 39px;
}

::-webkit-scrollbar {
    display: none;
}

.button-holder {
    height: 60px
}
</style>
